<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <div class="tit">
        <h2>{{dataForm.serverClassifyId?'编辑服务分类(id:'+dataForm.serverClassifyId+')':'新增服务分类'}}</h2>
        <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回</el-button>
      </div>
      <el-form :model="dataForm" ref="dataForm" label-width="200px" :rules="roleRules">
        <el-row>
          <el-form-item prop="parentClassifyId" label="上级服务分类" v-if="!dataForm.serverClassifyId && dataForm.parentClassifyId != 0">
            <el-select v-model="dataForm.parentClassifyId" clearable filterable>
              <el-option v-for="item in listParentClassify" :value="item.id" :label="item.name" :key="item.id">

              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="上级服务分类" v-if="dataForm.serverClassifyId || dataForm.parentClassifyId == 0">
            <span>{{dataForm.parentClassifyName}}</span>
          </el-form-item>
          <el-form-item prop="classifyName" label="服务分类名称">
            <el-input type="text" v-model="dataForm.classifyName"></el-input>
          </el-form-item>

          <el-form-item prop="classifyLogo" label="分类Logo">
            <upload-img class="upload-img" @uploadFileList="getLogoUrl" folder="classifyLogo">
              <img v-if="dataForm.classifyLogo" width="100%" :src="dataForm.classifyLogo" alt="">
              <div class="tip">
                <i class="el-icon-upload" v-if="!dataForm.classifyLogo"></i>
                <div v-if="!dataForm.classifyLogo" class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
              </div>
            </upload-img>
          </el-form-item>

          <el-form-item prop="classifyContent" label="服务分类内容">
            <el-input type="textarea" v-model="dataForm.classifyContent"></el-input>
          </el-form-item>

          <el-form-item prop="openFlag" label="是否专属商户">
            <el-radio-group v-model="dataForm.serverDefault">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="openFlag" label="是否开放">
            <el-radio-group v-model="dataForm.openFlag">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item>
            <el-button plain type="primary" @click="sureClick">保 存</el-button>
            <el-button plain @click="returnList">取 消</el-button>
          </el-form-item>
        </el-row>
      </el-form>

    </div>
  </div>
</template>

<script>
  import * as message from "@/constants/message";
  import ServerClassifyApi from '@/api/server/serverClassify';
  import UploadImg from "@/components/UploadImg"

  export default {
    data() {
      return {
        dataForm: {
          serverClassifyId: "",
          parentClassifyId: 0,
          parentClassifyName: "无",
          classifyName: "",
          classifyLogo: "",
          classifyContent: "",
          levels: 1,
          openFlag: 0,
          serverDefault: 0,
        },
        grpParentId:"",//父类的父类id
        listParentClassify: [],
        loadingIns: false,
        roleRules: {
          classifyName: [
            {required: true, message: "请输入服务分类名称", trigger: "blur"}
          ],
          /*parentClassifyId:[
            {required: true, message: "请选择一级服务分类", trigger: "change" }
          ],*/
        }
      }
    },
    components: {
      UploadImg
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        // 修改
        if (this.$route.query.id) {
          this.dataForm.serverClassifyId = this.$route.query.id
          this.getData()
        }
        // 新增下级
        if (this.$route.query.parentId&&this.$route.query.levels) {
          this.dataForm.parentClassifyId = this.$route.query.parentId
          this.grpParentId = this.$route.query.grpParentId
          this.dataForm.levels = Number(this.$route.query.levels)+1
        }

        this.getListParentClassify()
      },
      keydown(e) {
        if (e.keyCode == 32) {
          e.returnValue = false;
        }
      },
      getLogoUrl(val) {
        if (val.length > 0) {
          this.$Utils.notifySuccess("上传成功");
        }
        this.dataForm.classifyLogo = val[0]
      },
      getListParentClassify() {
        ServerClassifyApi.listIdName({level:this.dataForm.levels-1,parentId:this.grpParentId}).then(res => {
          this.listParentClassify = res.data
        })
      },
      getData() {
        ServerClassifyApi.getServerClassifyInfo({
          id: this.dataForm.serverClassifyId
        }).then(res => {
          this.$Utils.bindingBean(this.dataForm, res.data)
        })
      },
      sureClick() {
        this.$refs.dataForm.validate(valid => {
          if (valid) {
            this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
              .then(() => {
                if (this.dataForm.serverClassifyId) {
                  this.editData();
                } else {
                  this.addData();
                }
              });
          }
        })
      },
      addData() {
        let param = {
          classifyName: this.dataForm.classifyName,
          classifyLogo: this.dataForm.classifyLogo,
          parentClassifyId: this.dataForm.parentClassifyId,
          classifyContent: this.dataForm.classifyContent,
          levels: this.dataForm.levels,
          openFlag: this.dataForm.openFlag,
          serverDefault: this.dataForm.serverDefault
        };
        ServerClassifyApi.addServerClassify(param).then(res => {
          this.$Utils.notifySuccess()
          this.returnList();
        })
      },
      editData() {
        let param = {
          serverClassifyId: this.dataForm.serverClassifyId,
          classifyName: this.dataForm.classifyName,
          classifyLogo: this.dataForm.classifyLogo,
          parentClassifyId: this.dataForm.parentClassifyId,
          classifyContent: this.dataForm.classifyContent,
          levels: this.dataForm.levels,
          openFlag: this.dataForm.openFlag,
          serverDefault: this.dataForm.serverDefault
        };
        ServerClassifyApi.editServerClassify(param)
          .then(data => {
            this.$Utils.notifySuccess()
            this.returnList();
          })
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/server/serverClassifyManagement'});
      }
    },

  }
</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
